<%-- 
    Document   : realtimeTrucks
    Created on : 2019-12-23, 21:59:11
    Author     : dusin
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
    session.setAttribute("url", "../main/realtimeTrucks.jsp");
%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>        
        <link rel="stylesheet" href="../../js/jquery/themes/default/easyui.css" type="text/css" />
        <link rel="stylesheet" href="../../js/jquery/themes/icon.css" type="text/css" />
        <link rel="stylesheet" href="../../js/jquery/themes/color.css" type="text/css" />
        <link rel="stylesheet" href="../../css/demo.css" type="text/css" />
        <script type="text/javascript" src="../../js/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="../../js/jquery/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../../js/jquery/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=kaLBv8Axey6j0ZRMAHaYUhGAKVq4KG9K"></script>
        <script type="text/javascript">
            var currentFactoryCode;
            var map;
            var myIcon;
            var trucks=[];
            var lon = [];
            var lat = [];
            //定义marker上面弹出的信息窗口
            var opts = {
                width : 150,     // 信息窗口宽度
                height: 100,     // 信息窗口高度
                //title : "信息窗口" , // 信息窗口标题
                enableMessage:true//设置允许信息窗发送短息
            };
            function createContent(truck){
                var mapAddress;
                var point = new BMap.Point(truck.longitude,truck.latitude);
                var gc = new BMap.Geocoder(); 
                
                var content = "<div id='alertinfo'>";
                content +=" <p>"+truck.driverName+"</p>";
                content +="<p>"+truck.plateNo+"</p>";
                content +="<p>"+truck.factoryName+"</p>";
                content +="<p>"+truck.startTime+"</p>";
                //content +="<p id='address'>"+mapAddress+"</p>";
                content +="</div>";
                /*gc.getLocation(point, function(rs) {                    //可以获取地址
                    var addComp = rs.addressComponents;
                    mapAddress = addComp.province+addComp.city + addComp.district
                        + addComp.street + addComp.streetNumber;   
                    $('#address').text(mapAddress);
                });*/ 
                return content;
            }
            function openInfo(content,point){
                //定义信息窗口里面要显示的内容
                var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
                map.openInfoWindow(infoWindow,point); //开启信息窗口
            }
           
            function showTrucks(){          
               
                map.clearOverlays();
                $.post("../../servlet/web/cargo/FindAllTruckLocation", {factoryCode: currentFactoryCode},
                            function(data, status) {
                                if (status == 'success') {
                                    trucks.length=0;
                                    lat.length=0;
                                    lon.length=0;
                                    var i = 0;
                                    while (i < data.rows.length) {
                                        trucks.push(data.rows[i]);
                                        lat.push(data.rows[i].latitude);
                                        lon.push(data.rows[i].longitude);
                                        i++;
                                    }
                                    if (lat.length > 0) {
                                        var startPoint = new BMap.Point(lon[0], lat[0]);
                                        map.centerAndZoom(startPoint, 13);
                                    }
                                    for (i = 0; i < lon.length; i++) {
                                        var point = new BMap.Point(lon[i], lat[i]);
                                        var marker2 = new BMap.Marker(point, {icon: myIcon});  // 创建标注
                                        var content = createContent(trucks[i]);
                                        marker2.addEventListener("click",function(e){
                                            openInfo(content,point);
                                        });
                                        map.addOverlay(marker2);  // 将标注添加到地图中                                        
                                    }
                                }
                            }
                        , "json");
            }
            $(document).ready(function() {
               myIcon = new BMap.Icon("truck.png", new BMap.Size(50, 50),{
                    anchor: new BMap.Size(25, 24),//这个可以设置偏移位置                    
                    imageOffset: new BMap.Size(0, 0)
                    });
                // 百度地图API功能
                map = new BMap.Map("allmap");
                map.centerAndZoom(new BMap.Point(116.404, 39.915), 7);
                map.enableScrollWheelZoom(true);
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));
                map.addControl(new BMap.OverviewMapControl());
                //map.addControl(new BMap.MapTypeControl());               
                showTrucks(map,'',myIcon);                
                $('#factoryList').datalist({
                    onSelect: function(index, field, value) {
                        currentFactoryCode = field.code;
                        showTrucks(map,field.code,myIcon);
                    }
                });                
                var timer = setInterval(showTrucks, 20000);
                
            });
            
        </script>
    </head>
    <body class="easyui-layout" title="实时供货分布">
        <div class='easyui-panel' region='north' title="实时供货分布" 
             data-options="collapsible:false" > </div>
        <div  id="allmap" class="easyui-panel" region="center"  >

        </div>
        <div id="factoryList" class="easyui-datalist" region="east" style="width:350px;" data-options="
             url: '../../servlet/web/factory/Load4Combo',
             method: 'get',
             valueField:'code',
             textField:'name'">
        </div>      
         <style type="text/css">
            #alertinfo p {                      
                padding: 0px;
                margin: 0px;                
            }  
           
        </style>
    </body>
</html>
